<script setup lang="ts">
import { ref } from 'vue'
import { navigateTo } from '@uni-helper/uni-promises'
import iconSquare from '@/static/images/tabbar/home.png'
import iconSquareActive from '@/static/images/tabbar/home-active.png'
import iconClock from '@/static/images/tabbar/clock.png'
import iconMy from '@/static/images/tabbar/my.png'
import iconMyActive from '@/static/images/tabbar/my-active.png'

const active = ref('square')

const tabbarMap = {
    square: {
        path: '/pages/index/index',
    },
    clock: {
        path: '/pages/clock/clock',
    },
    mine: {
        path: '/pages/mine/mine',
    },
}

function onChangeActive(name: string) {
    active.value = name
    navigateTo({
        url: tabbarMap[name as keyof typeof tabbarMap].path,
    })
}

// const tabbar = ref([
//     {
//         name: '广场',
//         activeName: 'square',
//         activeColor: '#FF7642',
//         icon: iconSquare,
//         activeIcon: iconSquareActive,
//     },
//     {
//         name: '打卡',
//         activeName: 'clock',
//         activeColor: '#FF7642',
//         icon: iconClock,
//         activeIcon: iconClock,
//     },
//     {
//         name: '我的',
//         activeName: 'mine',
//         activeColor: '#FF7642',
//         icon: iconMy,
//         activeIcon: iconMyActive,
//     },
// ])
</script>

<template>
    <view class="w-full flex pt-5rpx shadow-[0_-3px_10px_rgba(0,0,0,0.1)] pb-safe-40rpx">
        <view class="flex flex-1 flex-col items-center justify-center" @click="onChangeActive('square')">
            <img class="h-54rpx w-54rpx" :src="active === 'square' ? iconSquareActive : iconSquare" alt="">
            <view class="mt-5rpx text-xs" :class="{ 'text-orange': active === 'square' }">广场</view>
        </view>
        <view class="flex flex-1 flex-col items-center justify-center" @click="onChangeActive('clock')">
            <view
                class="h-85rpx w-85rpx flex items-center justify-center rounded-full bg-white shadow-[0_-3px_10px_rgba(0,0,0,0.1)] -mt-45rpx">
                <img class="h-80rpx w-80rpx" :src="iconClock" alt="">
            </view>
            <view class="mt-20rpx text-xs" :class="{ 'text-orange': active === 'clock' }">打卡</view>
        </view>
        <view class="flex flex-1 flex-col items-center justify-center" @click="onChangeActive('mine')">
            <img class="h-54rpx w-54rpx" :src="active === 'mine' ? iconMyActive : iconMy" alt="">
            <view class="mt-5rpx text-xs" :class="{ 'text-orange': active === 'mine' }">我的</view>
        </view>
    </view>
</template>

<style scoped></style>
